<template>
  <div class="bg_white" style="height: calc(100vh - 198px);">
    <a-tabs default-active-key="1" @change="callback" class="set-margin-top">
      <a-tab-pane key="1" tab="基本信息" :class="aTabPaneClassArr">
        <template>
          <a-form-model style="display: inline-flex;" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <div style="display: inline-block">
              <a-form-model-item label="*姓名">
                <a-input v-model="userInfo.displayName" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="*登录账号">
                <a-input v-model="userInfo.username" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="性别">
                <a-radio-group v-model="userInfo.gender" :defaultValue="Number(userInfo.gender)" style="width: 200px">
                  <a-radio :value="0"> 男 </a-radio>
                  <a-radio :value="1"> 女 </a-radio>
                </a-radio-group>
              </a-form-model-item>
              <a-form-model-item label="员工编号">
                <a-input v-model="userInfo.employeeNumber" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="手机号码">
                <a-input v-model="userInfo.mobile" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="用户类型">
                <a-select v-model="userInfo.userType" style="width: 300px" :disabled="true" @change="handleChange">
                  <a-select-option value="EMPLOYEE" key="EMPLOYEE">内部员工</a-select-option>
                  <a-select-option value="SUPPLIER" key="SUPPLIER">供应商</a-select-option>
                  <a-select-option value="CUSTOMER" key="CUSTOMER">客户</a-select-option>
                  <a-select-option value="CONTRACTOR" key="CONTRACTOR">承包商</a-select-option>
                  <a-select-option value="DEALER" key="DEALER">经销商</a-select-option>
                  <a-select-option value="PARTNER" key="PARTNER">合作伙伴</a-select-option>
                  <a-select-option value="EXTERNAL" key="EXTERNAL">外部用户</a-select-option>
                  <a-select-option value="INTERN" key="INTERN">实习生</a-select-option>
                  <a-select-option value="TEMP" key="TEMP">临时用户</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="用户状态">
                <a-select v-model="userInfo.userState" style="width: 300px" :disabled="true" @change="handleChange">
                  <a-select-option value="RESIDENT" key="RESIDENT">在职</a-select-option>
                  <a-select-option value="WITHDRAWN" key="WITHDRAWN">离职</a-select-option>
                  <a-select-option value="INACTIVE" key="INACTIVE">停薪留职</a-select-option>
                  <a-select-option value="RETIREE" key="RETIREE">退休</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="排序">
                <a-input v-model="userInfo.sortIndex" style="width: 70px" :disabled="true" />
              </a-form-model-item>
            </div>

            <!-- 预览 a-upload 头像 -->
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>

            <div class="set-div-float">
              <a-form-model-item label="头像">
                <!-- <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :before-upload="beforeUpload" @change="handleChange">
                  <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                  <div v-else>
                    <a-icon :type="loading ? 'loading' : 'plus'" />
                    <div class="ant-upload-text">Upload</div>
                  </div>
                </a-upload> -->
                <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card" :file-list="fileList" @preview="handlePreview" @change="handleChangeImg">
                  <div v-if="fileList.length < 8">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">
                      点击上传
                    </div>
                  </div>
                </a-upload>
              </a-form-model-item>
              <a-form-model-item label="域账号">
                <a-input v-model="userInfo.windowsAccount" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="邮箱">
                <a-input v-model="userInfo.email" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="状态">
                <a-select v-model="userInfo.status" style="width: 300px" :disabled="true" @change="handleChange">
                  <a-select-option :value="1">活动</a-select-option>
                  <a-select-option :value="2">不活动</a-select-option>
                  <a-select-option :value="4">禁用</a-select-option>
                  <a-select-option :value="5">锁定</a-select-option>
                  <a-select-option :value="9">已删除</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="onSubmit"> 提交 </a-button>
              </a-form-model-item>
            </div>

          </a-form-model>
        </template>
      </a-tab-pane>
      <a-tab-pane key="2" tab="个人信息" force-render :class="aTabPaneClassArr">
        <template>
          <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <div style="display: inline-block">
              <a-form-model-item label="姓">
                <a-input v-model="userInfo.familyName" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="名">
                <a-input v-model="userInfo.givenName" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="证件类型：">
                <a-select :default-value="userInfo.idType" v-model="userInfo.idType" style="width: 120px" @change="handleChange">
                  <a-select-option :value="0" :key="0"> 未知 </a-select-option>
                  <a-select-option :value="1" :key="1"> 身份证 </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="婚姻状态">
                <a-select :default-value="userInfo.married" v-model="userInfo.married" style="width: 150px" @change="handleChange">
                  <a-select-option :value="0"> 未知 </a-select-option>
                  <a-select-option :value="1"> 单身 </a-select-option>
                  <a-select-option :value="2"> 已婚 </a-select-option>
                  <a-select-option :value="3"> 离异 </a-select-option>
                  <a-select-option :value="4"> 丧偶 </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="学历:">
                <a-input v-model="userInfo.education" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="毕业时间:">
                <a-input v-model="form.name" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="时区:">
                <a-input v-model="userInfo.timeZone" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="个人主页">
                <a-input v-model="userInfo.webSite" style="width: 300px" />
              </a-form-model-item>
            </div>
            <div class="set-div-float">
              <a-form-model-item label="中间名:">
                <a-input v-model="userInfo.middleName" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="昵称:">
                <a-input v-model="userInfo.nickName" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="证件号码:">
                <a-input v-model="userInfo.idCardNo" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="出生日期：">
                <a-input v-model="userInfo.birthDate" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="毕业院校：">
                <a-input v-model="form.name" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="工作时间：">
                <a-input v-model="userInfo.startWorkDate" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="语言偏好">
                <a-input v-model="userInfo.preferredLanguage" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="即时通讯">
                <a-input v-model="form.name" style="width: 300px" />
              </a-form-model-item>
            </div>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit"> 提交 </a-button>
            </a-form-model-item>
          </a-form-model>
        </template>
      </a-tab-pane>
      <a-tab-pane key="3" tab="机构信息" :class="aTabPaneClassArr">
        <template>
          <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <div style="display: inline-block">
              <a-form-model-item label="所属组织">
                <a-input v-model="userInfo.organization" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="部门编号">
                <a-input v-model="userInfo.departmentId" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="成本中心">
                <a-input v-model="userInfo.costCenter" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="职位">
                <a-input v-model="userInfo.jobTitle" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="助理">
                <a-input v-model="userInfo.assistant" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="入职时间">
                <a-input v-model="userInfo.entryDate" style="width: 300px" :disabled="true" />
              </a-form-model-item>
            </div>
            <div class="set-div-float">
              <a-form-model-item label="分支机构">
                <a-input v-model="userInfo.division" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="部门名称">
                <a-input v-model="userInfo.department" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="级别">
                <a-input v-model="form.name" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="上级经理">
                <a-input v-model="userInfo.manager" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="办公地址">
                <a-input v-model="userInfo.workAddressFormatted" style="width: 300px" :disabled="true" />
              </a-form-model-item>
              <a-form-model-item label="离职时间">
                <a-input v-model="userInfo.quitDate" style="width: 300px" :disabled="true" />
              </a-form-model-item>
            </div>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit"> 提交 </a-button>
            </a-form-model-item>
          </a-form-model>
        </template>
      </a-tab-pane>
      <a-tab-pane key="4" tab="机构扩展" :class="aTabPaneClassArr">
        <template>
          <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <div style="display: inline-block">
              <a-form-model-item label="工作电话">
                <a-input v-model="userInfo.workPhoneNumber" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="国家">
                <a-input v-model="userInfo.workCountry" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="城市">
                <a-input v-model="userInfo.workLocality" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="邮编">
                <a-input v-model="userInfo.workPostalCode" style="width: 300px" />
              </a-form-model-item>
            </div>
            <div class="set-div-float">
              <a-form-model-item label="工作邮件">
                <a-input v-model="userInfo.workEmail" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="省">
                <a-input v-model="userInfo.workRegion" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="地址">
                <a-input v-model="userInfo.workStreetAddress" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="传真">
                <a-input v-model="userInfo.workFax" style="width: 300px" />
              </a-form-model-item>
            </div>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit"> 提交 </a-button>
            </a-form-model-item>
          </a-form-model>
        </template>
      </a-tab-pane>
      <a-tab-pane key="5" tab="家庭信息" :class="aTabPaneClassArr">
        <template>
          <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <div style="display: inline-block">
              <a-form-model-item label="家庭邮箱">
                <a-input v-model="userInfo.homeEmail" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="家庭传真">
                <a-input v-model="userInfo.homeFax" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="国家">
                <a-input v-model="userInfo.homeCountry" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="城市">
                <a-input v-model="userInfo.homeLocality" style="width: 300px" />
              </a-form-model-item>
            </div>
            <div class="set-div-float">
              <a-form-model-item label="家庭电话">
                <a-input v-model="userInfo.homePhoneNumber" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="家庭邮编">
                <a-input v-model="userInfo.homePostalCode" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="省">
                <a-input v-model="userInfo.homeRegion" style="width: 300px" />
              </a-form-model-item>
              <a-form-model-item label="家庭地址">
                <a-input v-model="userInfo.homeStreetAddress" style="width: 300px" />
              </a-form-model-item>
            </div>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit"> 提交 </a-button>
            </a-form-model-item>
          </a-form-model>
        </template>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import dispose from "../../api/dispose";

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: [
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
      ],
      aTabPaneClassArr: ["set-margin-top", "set-aTabPane-padding-left"],
      uploadClassArr: ["avatar-uploader", "set-display"],
      divClassArr: ["set-div-float", "set-display"],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        name: "",
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      userInfo: {},
      imageUrl: '',
      loading: false
    };
  },
  mounted() {
    dispose
      .getPersonalData()
      .then((res) => {
        this.userInfo = res.data.data
        this.userInfo.sortIndex = 1
        this.fileList = []
        this.fileList.push({
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: this.userInfo.pictureBase64,
        })
      })
      .catch((err) => {
        console.error(err);
      });
  },
  methods: {
    // 上传图片
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChangeImg({ fileList }) {
      this.fileList = fileList;
    },

    callback(key) {
      console.log(key);
    },
    handleChange() { },
    beforeUpload() { },
    onSubmit() {
      dispose.updatePersonalData(this.userInfo).then((res => {
        if (res.data.code == 0) {
          this.$message.success('操作成功');
        }
      }))
    },
  },
};
</script>
<style scope>
/* .set-firtst-div {
  width: 90%;
  height: auto;
  display: inline-block;
  background-color: white;
} */

.set-margin-top {
  padding-top: 30px;
}

.set-aTabPane-padding-left {
  padding-left: 30px;
}
.set-display {
  display: inline-block;
}
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}
.set-div-float {
  display: inline-block;
  padding-left: 130px;
}
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
